<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 7</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
  // {{}} 插值表达式
  // v-html，v-bind(:)，v-on(@), 动态参数，修饰符
  const app = Vue.createApp({
    data() {
      return {
        message: "hello world",
        count: 2,
        price: 5,
      }
    },

    computed: {
      total(){
        return this.count * this.price;
      }
    },

    methods: {
      handleClick() {
        alert('click')
      },
      formatString(string){
        return string.toUpperCase();
      },
    },
    //{{formatString(message)}}
    template: `<div>{{total}}</div>`
  });
  const vm = app.mount('#root');
</script>
</html>